<template>
    <div class="footer-container hidden-xs-only">
        <div class="footer-body">
            <div>
                <div class="index-logo">
                    coinbase
                </div>
                <div class="shangbiao">
                    <p>© 2024 Coinbase</p>
                    <p>Blog•Twitter•Facebook</p>
                </div>
            </div>
            <div class="footer-item-container">
                <div class="footer-item">
                    <div class="item-title">Company</div>
                    <ul>
                        <li><a href="#" class="aurl">About</a></li>
                        <li><a href="#" class="aurl">Careers</a></li>
                        <li><a href="#" class="aurl">Press</a></li>
                        <li><a href="#" class="aurl">Investors</a></li>

                    </ul>
                </div>
                <div class="footer-item">
                    <div class="item-title">Company</div>
                    <ul>
                        <li><a href="#" class="aurl">About</a></li>
                        <li><a href="#" class="aurl">Careers</a></li>
                        <li><a href="#" class="aurl">Press</a></li>
                        <li><a href="#" class="aurl">Investors</a></li>

                    </ul>
                </div>
                
            </div>
            <div class="footer-item-container">
                <div class="footer-item">
                    <div class="item-title">Company</div>
                    <ul>
                        <li><a href="#" class="aurl">About</a></li>
                        <li><a href="#" class="aurl">Careers</a></li>
                        <li><a href="#" class="aurl">Press</a></li>
                        <li><a href="#" class="aurl">Investors</a></li>

                    </ul>
                </div>
                
            </div>
            <div class="footer-item-container">
                <div class="footer-item">
                    <div class="item-title">Company</div>
                    <ul>
                        <li><a href="#" class="aurl">About</a></li>
                        <li><a href="#" class="aurl">Careers</a></li>
                        <li><a href="#" class="aurl">Press</a></li>
                        <li><a href="#" class="aurl">Investors</a></li>

                    </ul>
                </div>
                
            </div>
        </div>
    </div>
    <div class="footer-container2 hidden-sm-and-up">
        <div class="footer-body">
            <div>
                <div class="index-logo">
                    coinbase
                </div>
                <div class="shangbiao">
                    <p>© 2024 Coinbase</p>
                    <p>Blog•Twitter•Facebook</p>
                </div>
            </div>
            <div class="footer-item-container">
                <div class="footer-item">
                    <div class="item-title">Company</div>
                    <ul>
                        <li><a href="#" class="aurl">About</a></li>
                        <li><a href="#" class="aurl">Careers</a></li>
                        <li><a href="#" class="aurl">Press</a></li>
                        <li><a href="#" class="aurl">Investors</a></li>

                    </ul>
                </div>
                <div class="footer-item">
                    <div class="item-title">Company</div>
                    <ul>
                        <li><a href="#" class="aurl">About</a></li>
                        <li><a href="#" class="aurl">Careers</a></li>
                        <li><a href="#" class="aurl">Press</a></li>
                        <li><a href="#" class="aurl">Investors</a></li>

                    </ul>
                </div>
                
            </div>
            <div class="footer-item-container">
                <div class="footer-item">
                    <div class="item-title">Company</div>
                    <ul>
                        <li><a href="#" class="aurl">About</a></li>
                        <li><a href="#" class="aurl">Careers</a></li>
                        <li><a href="#" class="aurl">Press</a></li>
                        <li><a href="#" class="aurl">Investors</a></li>

                    </ul>
                </div>
                
            </div>
            <div class="footer-item-container">
                <div class="footer-item">
                    <div class="item-title">Company</div>
                    <ul>
                        <li><a href="#" class="aurl">About</a></li>
                        <li><a href="#" class="aurl">Careers</a></li>
                        <li><a href="#" class="aurl">Press</a></li>
                        <li><a href="#" class="aurl">Investors</a></li>

                    </ul>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.footer-container2 {

    width: 100%;


    padding: 50px 0;
    .footer-item-container{
        margin-top: 30px;
    }
    .footer-item{
        margin-bottom: 20px;
        .item-title{
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        ul{
            li{
                margin-bottom: 10px;
                .aurl{
                    color: #5c616d;
                    font-size: 16px;
                    &:hover{
                        color: #0052ff;
                    }
                }
            }
        }
    }
    .index-logo {
        font-size: 26px;
        font-weight: 700;
        color: #0052ff;
    }

    .footer-body {

        margin: 0px auto;
        flex-direction: column;
        width: 90%;
        display: flex;
        justify-content: space-between;

    }
}
.footer-container {

    width: 100%;


    padding: 50px 0;
    .footer-item{
        margin-bottom: 20px;
        .item-title{
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        ul{
            li{
                margin-bottom: 10px;
                .aurl{
                    color: #5c616d;
                    font-size: 16px;
                    &:hover{
                        color: #0052ff;
                    }
                }
            }
        }
    }
    .index-logo {
        font-size: 26px;
        font-weight: 700;
        color: #0052ff;
    }

    .footer-body {
        width: 1000px;
        margin: 0px auto;
        padding-right: 200px;
        display: flex;

        justify-content: space-between;

    }
}
</style>